<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    // 画杯体
    ctx.lineWidth = 3
    ctx.strokeRect(100, 200, 200, 200)

    // 画把手
    drawCircle(300, 300, 50, 10, false, 'black')

    // 画线条
    for (let i = 0; i < 5; i++) {
        drawCircle(120 + i * 40, 120, 20, 1, true, 'red')
        drawCircle(120 + i * 40, 160, 20, 1, false, 'red')
    }

    /**
     * 画半圆弧
     * @param x
     * @param y
     * @param r
     * @param width
     * @param flag
     * @param color
     */
    function drawCircle(x, y, r, width, flag, color) {
        ctx.beginPath()
        ctx.arc(x, y, r, -Math.PI / 2, Math.PI / 2, flag)
        ctx.lineWidth = width
        ctx.strokeStyle = color
        ctx.stroke()
    }

</script>
</body>
</html>
